<template>
  <div class="registerFom">
    <div class="loginBak">
      <img src="../../../assets/image/login/bac.png" alt="" srcset="" />
    </div>
    <div class="login">
      <div class="loginFormBox">
        <div class="jusCenter">
          <div class="logo center">
            <img src="../../../assets/image/login/logo.png" alt="" srcset="" />
          </div>
        </div>
        <div class="hint">
          <div class="hintTitle jusCenter">{{ $t('messages.login.hintTitle') }}</div>
          <div class="hintSize jusCenter">{{ $t('messages.login.hintSize') }}</div>
        </div>
        <div class="formData center">
          <el-form :model="form" label-width="auto">
            <el-form-item>
              <el-input
                :prefix-icon="Avatar"
                placeholder="Please Linkman"
                class="formInput"
                v-model="form.linkman"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="Please account"
                :prefix-icon="User"
                class="formInput"
                v-model="form.account"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                placeholder="Please Phone"
                :prefix-icon="Phone"
                class="formInput"
                v-model="form.phone"
              />
            </el-form-item>
            <el-form-item v-if="!ifSearch">
              <el-input
                placeholder="Please PassWord"
                :prefix-icon="Lock"
                class="formInput"
                v-model="form.password"
              />
            </el-form-item>
            <el-form-item>
              <div class="footButton">
                <div @click="registerFn" v-if="ifSearch" class="button center">
                  {{ $t('messages.login.changePassword') }}
                </div>
                <div v-else @click="changePassWordFn" class="button center">
                  {{ $t('messages.login.changePassword2') }}
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible">
      <img style="width: 100%; heigth: 100%" w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script setup>
import { baseURL } from '@/http/request.js'
import { User, Lock, Avatar, Plus, Phone } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { userChangePasswordSearch, userChangePassword } from '@/http/api/login.js'
import { useRouter } from 'vue-router'
const router = useRouter()
let form = reactive({})
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
let ifSearch = ref(true)
let userInfo = reactive({})
const goRegisterFn = () => {

}
const changePassWordFn = async () => {
  try {
    const res = await userChangePassword(form)
    ElMessage({
      message: res.message,
      type: res.status == 1 ? 'success' : 'error',
    })
    router.push('/login')
  } catch (error) {
    ElMessage({
      message: '更改失败',
      type: error,
    })
  }

}
const registerFn = async () => {
  const res = await userChangePasswordSearch(form)
  ElMessage({
    message: res.message,
    type: res.status == 1 ? 'success' : 'error',
  })
  form.id = res.res.id
  ifSearch.value = false

}
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
  dialogVisible.value = true
  dialogImageUrl.value = uploadFile.response.image_url
}
// successfully upload
const handSuccessFnEn = (data) => {
  form.image = data.image_url
}
</script>

<style lang="scss" scoped>
.registerFom {
  height: 1000px;
  position: relative;
  .loginBak {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .login {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
  }
}
.formInput {
  width: 400px;
  height: 80px;
}
.logo {
  width: 250px;
  height: 250px;
  img {
    width: 100%;
    height: 100%;
  }
}
.hint {
  .hintTitle {
    font-size: 23px;
    color: #ffdd00;
  }
  .hintSize {
    font-size: 19px;
    color: #ffdd00;
  }
}
.footButton {
  width: 400px !important;
}
.button {
  width: 400px !important;
  height: 80px;
  background: #ffdd00;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}
.button:active {
  opacity: 0.9;
}
.size {
  color: #ffdd00;
  cursor: pointer;
}
.size:hover {
  text-decoration: underline;
}
</style>